import { useEffect, useState } from "react";
import "./App.scss";
import api from "./api.js";
import tempImage from "./assets/images/temp.png";
import deriveImage from "./assets/images/derive.png";
import fsImage from "./assets/images/fs.png";
import guimImage from "./assets/images/guim.png";
import hengwImage from "./assets/images/hengw.png";
import onenet1Image from "./assets/images/onenet1.png";
import shajunImage from "./assets/images/shajun.png";
import xiebiaoImage from "./assets/images/xiebiao.png";
import xixieImage from "./assets/images/xixie.png";
import o31 from "./assets/images/操作_臭氧.png";
import hj from "./assets/images/环境监测.png";
import sd from "./assets/images/空气湿度 (1).png";
import zl from "./assets/images/重量.png";
import { Switch } from "antd";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
    const intervalId = setInterval(() => {
      getData(); // 定时刷新数据
    }, 5000);

    return () => {
      clearInterval(intervalId); // 组件卸载时清除定时器
    };
  }, []);

 
  // 获取数据
  const getData = () => {
    api.kk().then((res) => {
      // data2[0].value = res.data.online ? "在线" : "离线";
      // 更新状态时使用函数式更新
      setData((prevData) => {
        const newData = [...prevData];
        newData[0].value = res.data.online ? "在线" : "离线";
        return newData;
      });
    });
    api.kk2().then((res) => {
      setData((prevData) => {
        const tvoc = res.data.datastreams[0].datapoints[0].value;
        const temp = res.data.datastreams[1].datapoints[0].value;
        const o3 = res.data.datastreams[2].datapoints[0].value;
        const humi = res.data.datastreams[5].datapoints[0].value;
        const weight = res.data.datastreams[10].datapoints[0].value;

        const newData = [
          ...prevData.slice(0, 1), // 保留第一项不变
          {
            name: "设备安全",
            image: deriveImage,
            value: "正常",
          },
          {
            name: "环境",
            image: hj,
            value: tvoc + "ppm",
          },
          {
            name: "温度",
            image: tempImage,
            value: temp + "°C",
          },
          {
            name: "臭氧",
            image: o31,
            value: o3 + "ppm",
          },
          {
            name: "湿度",
            image: sd,
            value: humi + "%",
          },
          {
            name: "重量",
            image: zl,
            value: weight + "g",
          },
          {
            name: "杀菌",
            image: shajunImage,
            isOpen:
              res.data.datastreams[8].datapoints[0].value === 1 ? true : false,
          },
          {
            name: "降温",
            image: fsImage,
            isOpen:
              res.data.datastreams[6].datapoints[0].value === 1 ? true : false,
          },
          {
            name: "柜门",
            image: guimImage,
            isOpen: false,
          },
          {
            name: "恒温",
            image: hengwImage,
            isOpen:
              res.data.datastreams[9].datapoints[0].value === 1 ? true : false,
          },
          {
            name: "洗鞋",
            image: xixieImage,
            isOpen:
              res.data.datastreams[3].datapoints[0].value === 1 ? true : false,
          },
        ];

        if (temp > 50 || humi > 100) {
          newData[1].value = "危险";
        } else {
          newData[1].value = "安全";
        }

        return newData;
      });
      // const tvoc = res.data.datastreams[0].datapoints[0].value;
      // const temp = res.data.datastreams[1].datapoints[0].value;
      // const o3 = res.data.datastreams[2].datapoints[0].value;
      // const humi = res.data.datastreams[5].datapoints[0].value;
      // const weight = res.data.datastreams[10].datapoints[0].value;
      // const data1 = [
      //   {
      //     name: "环境",
      //     image: tempImage,
      //     value: tvoc + "ppm",
      //   },
      //   {
      //     name: "温度",
      //     image: tempImage,
      //     value: temp + "°C",
      //   },
      //   {
      //     name: "臭氧",
      //     image: tempImage,
      //     value: o3 + "ppm",
      //   },
      //   {
      //     name: "湿度",
      //     image: tempImage,
      //     value: humi + "%",
      //   },
      //   {
      //     name: "重量",
      //     image: tempImage,
      //     value: weight + "g",
      //   },
      //   {
      //     name: "杀菌",
      //     image: shajunImage,
      //     isOpen:res.data.datastreams[8].datapoints[0].value === 1 ? true : false,
      //   },
      //   {
      //     name: "降温",
      //     image: fsImage,
      //     isOpen: res.data.datastreams[6].datapoints[0].value === 1 ? true : false,
      //   },
      //   {
      //     name: "柜门",
      //     image: guimImage,
      //     isOpen: false,
      //   },
      //   {
      //     name: "恒温",
      //     image: hengwImage,
      //     isOpen: res.data.datastreams[9].datapoints[0].value === 1 ? true : false,
      //   },
      //   {
      //     name: "洗鞋",
      //     image: xixieImage,
      //     isOpen: res.data.datastreams[3].datapoints[0].value === 1 ? true : false,
      //   },

      // ];

      // if (temp>50 || humi>100) {
      //   data2[1].value = "危险"
      // } else {
      //   data2[1].value = "安全"
      // }
      // const data = [ ...data2,...data1];

      // setData(data);
    });
  };

  // 开关切换
  const handleSwitchChange = (checked, name) => {
    const newData = data.map((item) => {
      if (item.name === name) {
        item.isOpen = checked;
      }
      return item;
    });
    setData(newData);
    handleRemote(name, checked);
  };

  // 点击不同的开关，发送不同的请求
  const handleRemote = (name, checked) => {
    switch (name) {
      case "杀菌":
        api.kk3({ data: { LED23: checked ? 1 : 0 } });
        break;
      case "降温":
        api.kk3({ data: { LED24: checked ? 1 : 0 } });
        break;
      case "柜门":
        api.kk3({ data: { LED20: checked ? 1 : 0 } });
        break;
      case "恒温":
        api.kk3({ data: { LED22: checked ? 1 : 0 } });
        break;
      case "洗鞋":
        api.kk3({ data: { LED21: checked ? 1 : 0 } });
        break;
      default:
        break;
    }
  };

  return (
    <div className="App">
      <div className="title">智能鞋柜环境监测平台</div>
      <div className="main">
        {data?.map((item) => {
          return (
            <div key={item.name}>
              <div className="left">
                {item.name}
                <img src={item.image} alt="" />
              </div>
              <span className="right">
                {item.value ? (
                  item.value
                ) : (
                  <>
                    <Switch
                      checked={item.isOpen}
                      onChange={(items) => handleSwitchChange(items, item.name)}
                      defaultChecked={item.isOpen}
                      size="large" // 设置开关的大小，可选值为 "small"、"default"、"large"
                      style={{
                        backgroundColor: item.isOpen ? "@ccc" : "#cccc",
                      }} // 自定义开关的背景颜色
                    ></Switch>
                  </>
                )}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;
